<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/base}">
<head>
    <title>订单详情 - 暖心助农选品平台</title>
</head>
<body>
    <div layout:fragment="content">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>订单详情</h2>
            <!-- <a th:href="@{/orders}" class="btn btn-outline-secondary">返回订单列表</a> -->
        </div>

        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span th:text="'订单号：' + ${order.id}">订单号</span>
                <span class="badge" th:classappend="${
                    order.status.name() == 'PENDING' ? 'bg-warning' :
                    order.status.name() == 'SHIPPED' ? 'bg-info' :
                    order.status.name() == 'COMPLETED' ? 'bg-success' :
                    'bg-danger'
                }" th:text="${
                    order.status.name() == 'PENDING' ? '待发货' :
                    order.status.name() == 'SHIPPED' ? '已发货' :
                    order.status.name() == 'COMPLETED' ? '已完成' :
                    '已取消'
                }">状态</span>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>商品</th>
                                <th>单价</th>
                                <th>数量</th>
                                <th>小计</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr th:each="item : ${order.items}">
                                <td>
                                    <div class="d-flex align-items-center">
                                        <img th:if="${item.product.image}" th:src="@{${item.product.image}}" 
                                             class="img-thumbnail me-3" style="width: 60px;" alt="产品图片">
                                        <img th:unless="${item.product.image}" th:src="@{/images/default-product.jpg}" 
                                             class="img-thumbnail me-3" style="width: 60px;" alt="默认产品图片">
                                        <div>
                                            <h6 class="mb-0" th:text="${item.product.name}">产品名称</h6>
                                            <small class="text-muted" th:text="${item.product.category}">类别</small>
                                        </div>
                                    </div>
                                </td>
                                <td th:text="'￥' + ${item.price}">单价</td>
                                <td th:text="${item.quantity}">数量</td>
                                <td th:text="'￥' + ${item.price * item.quantity}">小计</td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="3" class="text-end">总计：</td>
                                <td th:text="'￥' + ${order.totalAmount}">总计</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
                
                <div class="mt-4">
                    <h5>订单信息</h5>
                    <div class="row">
                        <div class="col-md-6">
                            <p class="mb-2">
                                <strong>收货地址：</strong>
                                <span th:text="${order.deliveryAddress}">地址</span>
                            </p>
                            <p class="mb-2">
                                <strong>联系电话：</strong>
                                <span th:text="${order.contactPhone}">电话</span>
                            </p>
                        </div>
                        <div class="col-md-6">
                            <p class="mb-2">
                                <strong>下单时间：</strong>
                                <span th:text="${#dates.format(order.createTime, 'yyyy-MM-dd HH:mm:ss')}">下单时间</span>
                            </p>
                            <p class="mb-2" th:if="${order.updateTime != null}">
                                <strong>最后更新：</strong>
                                <span th:text="${#dates.format(order.updateTime, 'yyyy-MM-dd HH:mm:ss')}">更新时间</span>
                            </p>
                        </div>
                    </div>
                </div>

                <div class="mt-4" th:if="${order.status.name() == 'SHIPPED'}">
                    <form th:action="@{/orders/{id}/status(id=${order.id})}" method="post" class="d-inline order-status-form">
                        <input type="hidden" name="status" value="COMPLETED">
                        <button type="submit" class="btn btn-success">确认收货</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <th:block layout:fragment="scripts">
        <script th:inline="javascript">
            $(document).ready(function() {
                // 只监听订单状态更新的表单
                $('.order-status-form').on('submit', function(e) {
                    e.preventDefault();
                    if (confirm('确认已收到货物吗？')) {
                        var form = $(this);
                        $.post(form.attr('action'), form.serialize())
                            .done(function(response) {
                                if (response === 'success') {
                                    location.reload();
                                } else {
                                    alert('操作失败: ' + response);
                                }
                            })
                            .fail(function() {
                                alert('操作失败');
                            });
                    }
                });
            });
        </script>
    </th:block>
</body>
</html> 